<template>
  <el-container>
    <el-aside width="200px" :class="{aside:ischeck}">
      <div id="av">
        <div id="avs">
          <img class="imgh" style="width: 55px; height: 50px; margin-left: 25px;" src="../assets/logo.png" />
          <div id="avv">
            Ademin

          </div>

        </div>
      </div>
      <div style="text-align: center;margin-top: 15px;">
        <el-row class="tac" style="width: 200px;">
          <el-col :span="23">
            <el-menu class="el-menu-vertical-demo" background-color="#333" text-color="#fff" active-text-color="yellow">
              <el-submenu v-for="item in items" :key="item.mname" v-if="item.mname=='系统管理'" :index="item.mid">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>{{item.mname}}</span>
                </template>
                <el-menu-item v-for="i in item.children" :key="i.mid">
                  <el-menu-item style="margin-left: 12px; font-size: 12px;" :index="i.mid" @click="clickMenu(i.path)">
                    {{i.mname}}
                  </el-menu-item>
                </el-menu-item>
              </el-submenu>
              <el-menu-item v-for="(item,index) in items" :key="item.mid" v-if="item.mname !='系统管理'" :index="item.mid"
                @click="clickMenu(item.path)">
                <i class="el-icon-setting"></i>
                <span slot="title">{{item.mname}}</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </el-aside>
    <el-container>
      <el-header style="height: 50px">
       <span style="display: inline-block;margin-bottom: 20px;" class="el-icon-s-operation style1"
          @click="changeAside"></span>

        <el-breadcrumb style="display: inline-block; color: white;  height: 56px; margin-left: 50px;" separator="/">
         <!-- <el-breadcrumb-item :to="{ path: '/main' }">
            首页
          </el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item,index) in items" v-if="item.mname!='系统管理'" :key="item.mid"
            @click="clickMenu(item.path)" :to="{ path: item.path }">
            {{item.mname}}
          </el-breadcrumb-item> -->
          {{date}}
        </el-breadcrumb>
        <p style="display: inline-block;margin-bottom: 34px; position: absolute; right: 10px;"><span> <a class="exit"
              href="/" @click="qlogin()">退出</a></span>
        </p>
      </el-header>
      <el-main style="border-left: 4px solid #000000;">
        <router-view />
      </el-main>
      <el-footer style="height: 24px">{{date}}</el-footer>
    </el-container>
  </el-container>
</template>
<script>
  import {
    mapState
  } from "vuex"


  export default {
    name: 'main',
    inject: ['reload'],
    data() {
      return {
        ischeck: false,
        activeIndex: '1',
        activeIndex2: '1',
        items: [],
        date: new Date()
      }
    },
    methods: {
      changeAside() {
        this.ischeck = !this.ischeck;
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);

      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);

      },
      handleSelect(key, keyPath) {
        // console.log(key, keyPath);
      },
      clickMenu(value) {
        if (value) {
          if (value.indexOf('管理') != -1) {
            var index = value.lastIndexOf("/");
            var paths = value.substring(0, index);
            var len = value.length;
            var params = value.substring(index + 1, len);
            console.log("当前路径: " + paths);
            console.log("params: " + params);
            this.reload();
            this.$router.push({
              path: paths,
              query: {
                params: params
              }
            });
            // this.$router.push({
            //        name: 'rep', // 这里要写路由表中设置的name值
            //        params: {
            //           manme : params // newsData是在路由表中设置的params
            //        }
            //    })
          } else {
            this.$router.push(value)
          }

        }
      },
      qlogin() {
        localStorage.removeItem('token');
        var token = this.$store.state.token;
        localStorage.setItem('token', '');
        if (token == null || token == '') {
          this.$router.push("/login");
        }
      }
    },
    computed: {
      ...mapState(['user'])
    },
    mounted() {
      this.$http.post("system/menu/loadMainMenu").then(res => {
        this.items = res.data;
        console.log(res.data)
      }).catch(err => {
        console.log(err);
      })

      let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(() => {
        _this.date = new Date(); // 修改数据date
      }, 1000)
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
      }
    }

  }
</script>

<style>
  .el-header {
    background-color: #000000;
    color: white;
    line-height: 50px;
  }

  .el-footer {
    background-color: #000000;
    color: white;
    text-align: center;
    font-size: 10px;
    line-height: 24px;
  }

  .el-breadcrumb__inner a,
  .el-breadcrumb__inner.is-link {
    color: white;
  }

  .op:hover {
    color: #3A8EE6;
  }

  .aside {
    display: none
  }

  .el-aside {
    overflow: hidden;
    background-color: #333;

    color: white;
    height: 648px;
  }

  #avv {

    display: inline-block;
    width: 90px;
    text-align: center;
    color: white;
    /* border: 1px solid #1E90FF; */
  }

  .el-main {
    padding: 0px;
    width: 100%;
    height: 574px;
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  li div {
    margin-left: -50px;
  }

  .el-menu-item {
    margin-left: -50px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .imgh,
  span {
    vertical-align: middle;
  }

  .style1 {
    display: inline-block;
    margin-bottom: 20px;
    position: absolute;
    margin-top: 22px;
  }

  .el-menu--popup {
    z-index: 100;
    border: none;
    padding: 0;
    background-color: wheat;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  }

  .el-breadcrumb {
    font-size: 17px;
    margin-top: 19.8px;
    color: #42B983;
  }

  #av {
    width: 200px;
    height: 70px;
    text-align: left;

    margin-top: 18px;


    /* border: 1px solid white; */
  }

  #avs {
    width: 190px;
    height: 70px;
    line-height: 70px;
    /* border: 1px solid teal; */
    margin: 0px auto;
    color: black;
    border-radius: 6px;
    background-color: #292929;
  }

  .exit {

    text-decoration: none;
    color: white;
  }
</style>
